/* 构建筑物信息 弹框
 * @ 劳兆城
 * @ 2017-08-12*/

<template>
  <interact-model ref="interact-model" title="电排站信息" class="building-model">
    <div class="building-warpper">
      <div class="building-tabs">
        <Tabs type="card" :animated="false">
          <TabPane label="基础信息" name="info"></TabPane>
        </Tabs>
      </div>

      <div class="building-content">
        <div class="building-table">
          <div class="table">
            <div v-for="(value, key, index) in buildingInfo">
              <div>{{key}}</div>
              <div>{{value}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </interact-model>
</template>

<script>
import { interactModelMixin, aPictureModelMixin } from 'common/js/mixins'

export default {
  mixins: [interactModelMixin, aPictureModelMixin],
  data () {
    return {
      activeTab: 'info',
      buildingInfo: {}
    }
  },
  methods: {
    show (feature, layerNames) {
      this.activeTab = 'info'
      this.$refs['interact-model'].showModel()
      this.buildingInfo = feature.get('content')
    }
  }
}
</script>

<style lang="scss">
.building-model {
  width: 500px;
  min-height: 200px;
  .building-warpper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .building-tabs {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
    }
    .building-content {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 40px;
      bottom: 5px;
      .building-table {
        width: 100%;
        .table {
          width: 100%;
          margin: auto;
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          > div{
            border: 1px solid #ccc;
            width: 50%;
            display: flex;
            align-items: center;
            > div{
              width: 50%;
              padding: 5px;
              &:nth-of-type(odd){
                border-right: 1px solid #ccc;
              }
            }
          }
        }
      }
      .building-picture {
        width: 100%;
        height: 100%;
        text-align: center;
        img {
          height: 100%;
        }
        .building-noPicture {
          width: 100%;
          height: 100%;
          text-align: center;
          background-image: url('../img/aPictureNoPicture.png');
          background-position: center 35%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>
